<template>
  <div class="container">
    <div class="app-container">
      <el-row :gutter="20">
        <el-col :span="14">
          <div class="grid-content bg-purple">
            <div class="el-card__body">
              <p>机构概述</p>
              <div class="content">
                <div class="left-content">
                  <div class="name">西三旗分拣中心</div>
                  <div class="address">地址：北京顺义区天澜综合保税区123号</div>
                  <div class="duty-people">负责人：赵五金 16712345678</div>
                  <div
                    class="search-sales-department el-button el-button--warning is-plain"
                  >
                    查看营业部分布
                  </div>
                </div>
                <div class="right-content">
                  <div class="item">
                    <div>
                      <div class="label">分拣中心(个)</div>
                      <div class="num">1</div>
                    </div>
                  </div>
                  <div class="item">
                    <div>
                      <div class="label">营业部(个)</div>
                      <div class="num">4</div>
                    </div>
                  </div>
                  <div class="item new">
                    <div>
                      <div class="label">司机人数(个)</div>
                      <div class="num">48</div>
                    </div>
                  </div>
                  <div class="item new">
                    <div>
                      <div class="label">快递员人数(个)</div>
                      <div class="num">64</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="grid-content bg-purple">
            <div
              class="el-card__body"
              style="padding-top: 21px; min-height: 60px"
            >
              <div class="header">
                <p>今日数据</p>
                <div class="refresh-box">2023-05-24 11:04</div>
              </div>
              <div
                class="row-bg el-row is-justify-space-around el-row--flex"
                span="24"
              >
                <div class="el-col el-col-8">
                  <div class="label">订单金额(元)</div>
                  <div id="my-number1" class="value">2,284</div>
                  <div class="bottom">较昨日 +342</div>
                </div>
                <div class="el-col el-col-8">
                  <div class="label">订单数量(笔)</div>
                  <div id="my-number2" class="value">193</div>
                  <div class="bottom">较昨日 +27</div>
                </div>
                <div class="el-col el-col-8">
                  <div class="label">运输任务(次)</div>
                  <div id="my-number3" class="value">38</div>
                  <div class="bottom">较昨日 +26</div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="14">
          <div class="grid-content bg-purple">
            <div class="el-card__body">
              <div class="header">
                <p>
                  待办任务<i
                    class="icon iconfont icon-wenhao"
                    style="margin-left: 4px"
                  />
                </p>
                <div class="refresh-box">
                  <span
                    class="icon iconfont icon-shuaxin"
                    style="margin-right: 4px"
                  />2023-05-24 11:04
                </div>
              </div>
              <div class="ball-chart-box">
                <div id="ec" style="height: 210px" />
              </div>
              <div class="bottom-label">
                <div class="item">
                  <span>待取件</span> <span class="one1">39</span>
                </div>
                <div class="item">
                  <span>待派件</span> <span class="one2">18</span>
                </div>
                <div class="item">
                  <span>未分配运输</span> <span class="one3">4</span>
                </div>
                <div class="item">
                  <span>超时运输</span> <span class="one4">5</span>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="grid-content bg-purple">
            <div
              class="el-card__body"
              style="padding-top: 21px; min-height: 60px"
            >
              <div class="header">
                <p>
                  执行中任务<i
                    class="icon iconfont icon-wenhao"
                    style="margin-left: 4px"
                  />
                </p>
                <div class="refresh-box">
                  <span
                    class="icon iconfont icon-shuaxin"
                    style="margin-right: 4px"
                  />
                  2023-05-24 11:04
                </div>
              </div>
              <div class="ball-chart-box">
                <div id="et" style="height: 210px" />
              </div>
              <div class="bottom-label">
                <div class="item">
                  <span>运输中</span> <span class="one1">53</span>
                </div>
                <div class="item">
                  <span>派送中</span> <span class="one2">34</span>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <div class="el-card__body">
              <p>常用功能</p>
              <div class="useFeaturelist">
                <div class="item">
                  <img src="@/assets/01.png" alt="">
                  <p>快递作业</p>
                </div>
                <div class="item">
                  <img src="@/assets/02.png" alt="">
                  <p>运输任务</p>
                </div>
                <div class="item">
                  <img src="@/assets/03.png" alt="">
                  <p>路线管理</p>
                </div>
                <div class="item">
                  <img src="@/assets/04.png" alt="">
                  <p>车辆管理</p>
                </div>
                <div class="item">
                  <img src="@/assets/05.png" alt="">
                  <p>司机管理</p>
                </div>
                <div class="item">
                  <img src="@/assets/06.png" alt="">
                  <p>运费查询</p>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import 'echarts-liquidfill'

export default {
  mounted() {
    const myEcharts = echarts.init(document.querySelector('#ec'))
    const option = {
      series: [
        {
          name: '水球图',
          type: 'liquidFill',
          radius: '60%',
          center: ['13%', '40%'],
          data: [0.42],
          period: '2000',
          label: {
            show: true,
            color: '#000',
            insideColor: '#000',
            fontSize: 16,
            fontWeight: 'normal',
            align: 'center',
            baseline: 'middle',
            position: 'inside'
          },
          itemStyle: {
            opacity: 1,
            shadowBlur: 0,
            shadowColor: 'rgba(0, 0, 0, 0)'
          },
          backgroundStyle: {
            color: '#ffe5e0'
          },
          color: ['#e35d3e'],
          outline: {
            show: true,
            borderDistance: 5,
            itemStyle: {
              color: 'none',
              borderColor: '#e25c3e',
              borderWidth: 1
              // shadowBlur: 20,
              // shadowColor: 'rgba(0, 0, 0, 0.25)'
            }
          },
          emphasis: {
            itemStyle: {
              opacity: 1,
              color: '#f9785c'
            }
          }
        },
        {
          name: '水球图',
          type: 'liquidFill',
          radius: '60%',
          center: ['38%', '40%'],
          data: [0.31],
          period: '2000',
          label: {
            show: true,
            color: '#000', // 文字颜色
            insideColor: '#000', // 文字被水盖住的颜色
            fontSize: 16,
            fontWeight: 'normal',
            align: 'center',
            baseline: 'middle',
            position: 'inside'
            // padding: '1',
            // shadowColor: '#000',
            // shadowBlur: '10'
          },
          itemStyle: {
            opacity: 1,
            shadowBlur: 0,
            shadowColor: 'rgba(0, 0, 0, 0)'
          },
          backgroundStyle: {
            color: '#fff1d9'
          },
          color: ['#ffc45e'],
          outline: {
            show: true,
            borderDistance: 5,
            itemStyle: {
              color: 'none',
              borderColor: '#fed182',
              borderWidth: 1
              // shadowBlur: 20,
              // shadowColor: 'rgba(0, 0, 0, 0.25)'
            }
          },
          emphasis: {
            itemStyle: {
              opacity: 1,
              color: '#ffda77'
            }
          }
        },
        {
          name: '水球图',
          type: 'liquidFill',
          radius: '60%',
          center: ['63%', '40%'],
          data: [0.29],
          period: '2000',
          label: {
            show: true,
            color: '#000',
            insideColor: '#000',
            fontSize: 16,
            fontWeight: 'normal',
            align: 'center',
            baseline: 'middle',
            position: 'inside'
            // padding: '1',
            // shadowColor: '#000',
            // shadowBlur: '10'
          },
          itemStyle: {
            opacity: 1,
            shadowBlur: 0,
            shadowColor: 'rgba(0, 0, 0, 0)'
          },
          backgroundStyle: {
            color: '#ffead7'
          },
          color: ['#ff9b41'],
          outline: {
            show: true,
            borderDistance: 5,
            itemStyle: {
              color: 'none',
              borderColor: '#ff9b41',
              borderWidth: 1
              // shadowBlur: 20,
              // shadowColor: 'rgba(0, 0, 0, 0.25)'
            }
          },
          emphasis: {
            itemStyle: {
              opacity: 1,
              color: '#ffb45d'
            }
          }
        },
        {
          name: '水球图',
          type: 'liquidFill',
          radius: '60%',
          center: ['87%', '40%'],
          data: [0.41],
          period: '2000',
          label: {
            show: true,
            color: '#000',
            insideColor: '#000',
            fontSize: 16,
            fontWeight: 'normal',
            align: 'center',
            baseline: 'middle',
            position: 'inside'
            // padding: '1',
            // shadowColor: '#000',
            // shadowBlur: '10'
          },
          itemStyle: {
            opacity: 1,
            shadowBlur: 0,
            shadowColor: 'rgba(0, 0, 0, 0)'
          },
          backgroundStyle: {
            color: '#fafade'
          },
          color: ['#edde83'],
          outline: {
            show: true,
            borderDistance: 5,
            itemStyle: {
              color: 'none',
              borderColor: '#edde83',
              borderWidth: 1
              // shadowBlur: 20,
              // shadowColor: 'rgba(0, 0, 0, 0.25)'
            }
          },
          emphasis: {
            itemStyle: {
              opacity: 1,
              color: '#fef49a'
            }
          }
        }
      ]
    }
    myEcharts.setOption(option)
    const myEch = echarts.init(document.querySelector('#et'))
    const op = {
      series: [
        {
          name: '水球图',
          type: 'liquidFill',
          radius: '60%',
          center: ['25%', '40%'],
          data: [0.42],
          period: '2000',
          label: {
            show: true,
            color: '#000',
            insideColor: '#000',
            fontSize: 16,
            fontWeight: 'normal',
            align: 'center',
            baseline: 'middle',
            position: 'inside'
            // padding: '1',
            // shadowColor: '#000',
            // shadowBlur: '10'
          },
          itemStyle: {
            opacity: 1,
            shadowBlur: 0,
            shadowColor: 'rgba(0, 0, 0, 0)'
          },
          backgroundStyle: {
            color: '#ffe5e0'
          },
          color: ['#e35d3e'],
          outline: {
            show: true,
            borderDistance: 5,
            itemStyle: {
              color: 'none',
              borderColor: '#e25c3e',
              borderWidth: 1
              // shadowBlur: 20,
              // shadowColor: 'rgba(0, 0, 0, 0.25)'
            }
          },
          emphasis: {
            itemStyle: {
              opacity: 1,
              color: '#f9785c'
            }
          }
        },
        {
          name: '水球图',
          type: 'liquidFill',
          radius: '60%',
          center: ['75%', '40%'],
          data: [0.31],
          period: '2000',
          label: {
            show: true,
            color: '#000', // 文字颜色
            insideColor: '#000', // 文字被水盖住的颜色
            fontSize: 16,
            fontWeight: 'normal',
            align: 'center',
            baseline: 'middle',
            position: 'inside'
            // padding: '1',
            // shadowColor: '#000',
            // shadowBlur: '10'
          },
          itemStyle: {
            opacity: 1,
            shadowBlur: 0,
            shadowColor: 'rgba(0, 0, 0, 0)'
          },
          backgroundStyle: {
            color: '#fff1d9'
          },
          color: ['#ffc45e'],
          outline: {
            show: true,
            borderDistance: 5,
            itemStyle: {
              color: 'none',
              borderColor: '#fed182',
              borderWidth: 1
              // shadowBlur: 20,
              // shadowColor: 'rgba(0, 0, 0, 0.25)'
            }
          },
          emphasis: {
            itemStyle: {
              opacity: 1,
              color: '#ffda77'
            }
          }
        }
      ]
    }
    myEch.setOption(op)
  }
}
</script>
<style lang="scss" >
.el-row {
  margin-bottom: 20px;
  margin-top: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 10px;
}
.bg-purple {
  background: #ffffff;
}
.grid-content {
  position: relative;
  border-radius: 4px;
  min-height: 36px;
  .el-card__body {
    position: relative;
    padding: 23px 20px;
    .useFeaturelist {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      .item {
        width: 15.15%;
        height: 116px;
        background: #fafafb;
        border-radius: 10px;
        cursor: pointer;
        img{
          width: 40px;
          height: 40px;
          margin: 0 auto;
          display: block;
          margin-top: 20px;
        }
        p {
          margin-top: 14px;
          font-size: 16px;
          color: #20232a;
          font-weight: 700;
          text-align: center;
          &:hover{
            color: #e15536;
          }
        }
      }
    }
    .bottom-label {
      cursor: pointer;
      position: absolute;
      top: 235px;
      display: flex;
      width: 100%;
      justify-content: space-around;
      padding-right: 40px;
      font-weight: 700;
    }
    p {
      margin-top: 0;
      font-size: 16px;
      font-weight: 700;
    }
    .content {
      position: relative;
      display: flex;
      justify-content: space-between;
      .left-content {
        padding-left: 10px;
        flex: 50%;
        border-right: 1px solid #ebeef5;
        .name {
          font-size: 16px;
          margin-top: 20px;
          margin-bottom: 13px;
        }
        .address {
          font-size: 14px;
          color: #818693;
          margin-bottom: 8px;
        }
        .duty-people {
          font-size: 14px;
          color: #818693;
          margin-bottom: 23px;
        }
        .search-sales-department {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 14px;
          color: #e15536;
          width: 158px;
          height: 40px;
          background: #ffeeeb;
          border: 1px solid #f3917c;
          border-radius: 4px;
          cursor: pointer;
        }
      }
      .right-content {
        display: flex;
        flex: 50%;
        width: 300px;
        flex-wrap: wrap;
        .item {
          height: 85px;
          flex: 50%;
          flex-direction: column;
          align-items: center;
          display: flex;
          .label {
            font-size: 14px;
            margin-bottom: 10px;
          }
          .num {
            font-size: 32px;
            font-weight: 700;
            color: #e15536;
            cursor: pointer;
          }
        }
        .new {
          height: 64px;
        }
      }
    }
    .header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      p {
        margin-top: 0;
        font-size: 16px;
        color: #20232a;
        font-weight: 700;
      }
      .refresh-box {
        font-size: 14px;
        color: #818693;
        display: flex;
        align-items: center;
        cursor: pointer;
      }
    }
    .row-bg {
      margin-top: 16px;
      padding-left: 10px;
      display: flex;
      justify-content: space-around;
      .el-col {
        display: flex;
        flex-direction: column;
        text-align: center;
        width: 33.33333%;
        .label {
          font-size: 14px;
          color: #20232a;
          margin-bottom: 21px;
        }
        .value {
          font-size: 36px;
          color: #20232a;
          font-weight: 700;
          margin-bottom: 24px;
        }
      }
      .bottom {
        font-size: 14px;
        color: #818693;
        margin-bottom: 22px;
        display: flex;
        justify-content: center;
        padding-left: 9px;
      }
    }
  }
}
.one1 {
  color: #f9785c;
}
.one2 {
  color: #ffc45e;
}
.one3 {
  color: #ff9b41;
}
.one4 {
  color: #edde83;
}
</style>
